<template>
    <transition name="confirm-fade">
        <div class="confirm" v-show="showFlag" @click.stop>
            <div class="confirm-wrapper">
                <div class="confirm-content">
                    <p class="text">{{confirmMsg}}</p>
                    <div class="operate">
                        <div @click="cancel" class="operate-btn left">{{cancelBtnMsg}}</div>
                        <div @click="confirm" class="operate-btn">{{confirmBtnMsg}}</div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import { mapGetters, mapActions } from 'vuex'
    export default {
        data() {
            return {
                showFlag: false
            }
        },
        props: {
            text: {
                type: String,
                default: ''
            },
            confirmBtnText: {
                type: String,
                default: '确定'
            },
            cancelBtnText: {
                type: String,
                default: '取消'
            }
        },
        computed: {
            confirmMsg() {
                return this.confirmOption
                    ? this.confirmOption.msg
                    : this.text
            },
            confirmBtnMsg() {
                return this.confirmOption
                    ? this.confirmOption.comfirmBtnMsg
                    : this.confirmBtnText
            },
            cancelBtnMsg() {
                return this.confirmOption
                    ? this.confirmOption.cancelBtnMsg
                    : this.cancelBtnText
            },
            ...mapGetters([
                'confirmOption'
            ])
        },
        methods: {
            show() {
                this.showFlag = true
            },
            hide() {
                this.showFlag = false
                this.clearConfirm()
            },
            cancel() {
                this.$emit('cancel')
                this.hide()
            },
            confirm() {
                this.$emit('confirm')
                this.confirmOption.handle()
                this.hide()
            },
            ...mapActions([
                'clearConfirm'
            ])
        },
        watch: {
            confirmOption(newValue) {
                newValue && this.show()
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .confirm
        position: fixed
        left: 0
        right: 0
        top: 0
        bottom: 0
        z-index: 200
        mask()
        &.confirm-fade-enter-active
            animation: confirm-fadein 0.3s
            .confirm-content
                animation: confirm-zoom 0.3s

        .confirm-wrapper
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
            z-index: 999
            .confirm-content
                width: 270px
                border-radius: 5px
                background: $color-highlight-background
                color: $color-text
                .text
                    padding: 19px 15px
                    line-height: 28px
                    text-align: center
                    font-size: $font-size-large-l
                .operate
                    display: flex
                    align-items: center
                    text-align: center
                    font-size: $font-size-large
                    .operate-btn
                        flex: 1
                        line-height: 22px
                        padding: 10px 0
                        border-top: 1px solid $color-text-ld
                        &.left
                            border-right: 1px solid $color-text-ld
                            color: $color-theme

    @keyframes confirm-fadein
        0%
            opacity: 0
        100%
            opacity: 1

    @keyframes confirm-zoom
        0%
            transform: scale(0)
        50%
            transform: scale(1.1)
        100%
            transform: scale(1)
</style>
